<template>
  <div class="com">
    <div v-for="n in sentences" :key="n.id"
      @tap="handleToggleSelect(n.id)"
      class="weui-flex v-mdl ta-c bd-b pdv">
      <div><sound-player :path="n.audioPath"></sound-player></div>
      <div class="weui-flex__item">{{n.text}}</div>
      <div><input type="checkbox" :checked="n.checked"></div>
    </div>
  </div>
</template>

<script>
import SoundPlayer from '@/components/sound-player'
import {mapState, mapActions, mapGetters} from 'vuex'
export default {
  components: {
    SoundPlayer
  },
  computed: {
    ...mapGetters('exercise-select', [
      'sentences',
    ]),
  },
  methods: {
    ...mapActions('exercise-select', [
      'handleToggleSelect'
    ])
  }
}
</script>

<style scoped lang="less">
@import '../../assets/less/var.less';
</style>
